<script setup lang="ts">
import { useRouteQuery } from '@peng_kai/kit/libs/vueuse';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.min.css';
import { Skeleton } from '~comp/skeleton';

const router = useRouter();
const NewsId = useRouteQuery('news_id');
const enabled = computed(() => !!NewsId);
const detailQry = useQuery({
  queryKey: [apisBlog.apiNewsDetail.id, NewsId],
  queryFn: () => apisBlog.apiNewsDetail({ news_id: Number(NewsId.value) }),
  enabled,
});
const $article = ref<HTMLElement>();
const detail = computed(() => detailQry.data);

useImageViewer($article);

function useImageViewer(article: Ref<HTMLElement | undefined>) {
  let viewer: Viewer;

  watch(article, (article) => {
    if (!article)
      return;

    viewer = new Viewer(article, {
      zIndex: 3000,
      backdrop: true,
      fullscreen: undefined,
      title: false,
      button: true,
      toolbar: {
        rotateLeft: true,
        rotateRight: true,
        next: true,
        prev: true,
        oneToOne: true,
      },
    });
  });

  onUnmounted(() => viewer?.destroy());
}
</script>

<template>
  <div class="page-content-w">
    <!--eslint-disable-->
    <div class="flex-between rounded-lg active:text-sys-text-head *:block *:py-3 *:bg-sys-layer-d *:px-4 *:rounded-lg *:cursor-pointer">
      <span @click="router.go(-1)">
        <i class="i-material-symbols:arrow-back-ios-new-rounded" /> {{ $t('sxKuvePvHhLMcxImQbXv') }}
      </span>
      <span v-if="detail?.value?.category?.[0]?.name">
        {{ detail?.value?.category?.[0]?.name }}
      </span>
    </div>
    <div class="text-right text-sys-text-body mt-7.5 mb-5">
      {{ $d(detail.value?.create_time ?? 1725506751020) }}
    </div>
    <div class="text-10 mb-4 font-semibold lt-tabletl:text-5.5">
      {{ detail.value?.title }}
    </div>
   <TSuspenseView v-bind="buildSvPropsOfQuery(detailQry)">
      <article ref="$article" class="content" v-html="detail?.value?.content"></article>
      <template #pending>
        <Skeleton class="w-full">
          <Skeleton type="rect" class="mb-2" v-for="i in 10"></Skeleton>
        </Skeleton>
      </template>
    </TSuspenseView>
  </div>
</template>

<style scoped lang="scss">
.content {
  padding: 0 40px 40px;
  line-height: 1.5em;
  color: #b1bdd1;

  @media bp-lt-tabletl {
    padding: 0 16px 16px;
  }

  :deep(h1) {
    margin: 1em 0;
    font-size: 1.8rem;
    font-weight: 600;
  }

  :deep(h2) {
    margin: 1em 0;
    font-size: 1.4rem;
    font-weight: 600;
  }

  :deep(h3) {
    margin: 1em 0;
    font-size: 1.2rem;
    font-weight: 600;
  }

  :deep(p) {
    margin: 1em 0;
  }

  :deep(a) {
    color: #2b72e9;
    text-decoration: underline;

    &:hover {
      color: #3c7ded;
    }
  }

  :deep(ul) {
    margin: 1em 0 1em 2em;
    list-style: initial;
  }

  :deep(ol) {
    margin: 1em 0 1em 2em;
    list-style: initial;
  }

  :deep(li) {
    margin: 0.5em 0;
  }

  :deep(img) {
    max-width: 100%;
    height: auto !important;

    // 当屏幕过小时，覆盖富文本对图片设置的宽度，使其自适应显示
    @media bp-lt-tablet {
      &[style*='width:'] {
        width: 100% !important;
      }
    }
  }

  :deep(blockquote) {
    padding: 1.5em 1em;
    background-color: rgb(0 0 0 / 20%);
    border-left: 4px solid #3c7ded;
  }

  :deep(table) {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid rgb(0 0 0 / 30%);
    }

    th {
      font-weight: bold;
      background-color: #19223c;
    }

    tr:nth-child(even) {
      background-color: rgb(0 0 0 / 10%);
    }

    tr:hover {
      background-color: rgb(0 0 0 / 20%);
    }
  }
}

:global(.medium-zoom-overlay) {
  z-index: 100;
}

:global(.medium-zoom-image--opened) {
  z-index: 101;
}
</style>
